<template>
  <van-header title="歌单详情" left-arrow></van-header>
  <div class="loading" v-if="songList.length == 0">
    <van-loading size="24px" vertical>加载中...</van-loading>
  </div>
  <div class="section" v-else>
    <div class="detail-header">
      <div class="detail-header__top">
        <img :src="info.coverImgUrl" alt="" />
        <div>
          <h3>{{ info.name }}</h3>
          <p>{{ info.description }}</p>
        </div>
      </div>
      <div class="detail-header__bottom">
        <span><van-icon name="like-o" size="24" /><br />{{ getCount(info.subscribedCount) }}</span>
        <span><van-icon name="down" size="24" /><br />下载</span>
        <span><van-icon name="chat-o" size="24" /><br />{{ getCount(info.commentCount) }}</span>
        <span><van-icon name="share-o" size="24" /><br />分享</span>
      </div>
    </div>
    <div class="detail-songs">
      <song-list :songs="songList" icon></song-list>
    </div>
  </div>
</template>

<script setup>
import { onBeforeMount, ref, reactive } from 'vue';
import VanHeader from '@/components/header/Header.vue';
import SongList from '@/components/songlist/SongList.vue';

import { useMyRouters } from '@/router';
import { createSong } from '@/util';
import { getPlayListDetail } from '@/api/wangyi/playlist';
import { getSongDetail } from '@/api/wangyi/song';

const { route } = useMyRouters();

// 当前页面信息
const info = reactive({
  coverImgUrl: '',
  name: '',
  description: '',
  subscribedCount: 0,
  commentCount: 0,
  shareCount: 0
});

onBeforeMount(() => {
  console.log('页面参数：' + route.query.id);
  _getPlayListDetail(route.query.id);
});

const getCount = num => {
  return num > 999 ? '999+' : num;
};

// 当前歌曲列表
const songList = ref([]);
const _getPlayListDetail = async id => {
  const { playlist } = await getPlayListDetail({ id: id });
  // console.log(playlist);
  // 获取页面信息
  info.coverImgUrl = playlist.coverImgUrl;
  info.name = playlist.name;
  info.description = playlist.description;
  info.subscribedCount = playlist.subscribedCount;
  info.commentCount = playlist.commentCount;
  info.shareCount = playlist.shareCount;
  // 歌曲列表
  const tracks = playlist.tracks;
  let trackIds = [];
  for (const item of playlist.trackIds) {
    trackIds.push(item.id);
  }
  console.log('tracks: ', tracks);
  console.log('trackIds: ', trackIds);
  const { songs } = await getSongDetail(trackIds.join());
  // console.log('songs: ', songs);
  let _songs = [];
  // for (let i = 0; i < tracks.length; i++) {
  //   songs.push(createSong(tracks[i]));
  // }
  for (const item of songs) {
    _songs.push(createSong(item));
  }
  songList.value = _songs;
};
</script>

<style lang="less" scoped>
.detail-header {
  padding: 10px 12px;
  overflow: hidden;
  .detail-header__top {
    display: flex;
    align-items: center;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    img {
      width: 90px;
      height: 90px;
      border-radius: 5px;
      margin-right: 10px;
    }
    h3,
    p {
      margin: 0;
      line-height: 23px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    h3 {
      font-size: 17px;
    }
  }
  .detail-header__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    span {
      display: inline-block;
      width: 20%;
      text-align: center;
      line-height: 18px;
    }
  }
}
.detail-songs {
  .van-icon-ellipsis {
    transform: rotateZ(90deg);
  }
}
</style>
